<template>
	<view class="m-gift-pop" id="popAll" :style="{pointerEvents:show?'fill':'none'}" @click="handlePopClick">
		<view class="pop-content flex-column-start-center"
			:style="{height:popHeigh+'rpx',bottom:show?'0rpx':-popHeigh-70+'rpx'}">
			<!-- slot部分 -->
			<view class="gift-type-tabs flex-row-start-center">
				<view class="type-tab-item flex-row-center-center" :class="{'act-tab':item.key==actTypeTab.key}"
					v-for="(item,index) in typeTabs" :key="index">
					{{item.name}}
				</view>

			</view>
			<view class="bottom-gifts-scroll flex-column-start-center">
				<scroll-view ref="scrollView" :scroll-y="true" class="gifts-content-y" :show-scrollbar="false"
					:scroll-with-animation="true">
					<view class="gift-list flex-row-start-start">
						<view class="gift-item "
							:class="{'empty-gift-item':item.isEmpty,'active-gift-item':index==actGiftIndex}"
							v-for="(item,index) in giftList" :key="index">
							<view class="gift-item-content flex-column-start-center"
								@click="handleGiftItemClick(item,index)">
								<view class="gift-img flex-row-center-center" v-if="item.photoUrl">
									<image class="cover-img" :src="item.photoUrl" mode="aspectFill"></image>
									<view class="gift-num">{{item.total}}</view>
								</view>
								<view class="gift-name" v-if="item.cardName">{{item.cardName}}</view>
								<view class="gift-tip" v-if="item.intro">{{item.intro}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="bottom-btn-box flex-row-between-center">
				<view class="left-tip flex-row-start-center">去获取
					<image class="left-tip-icon"
						src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/76c7818c369c4657a28845d1f047c8ee.png"
						mode="aspectFill"></image>
				</view>
				<view class="right-send flex-row-center-center" :class="{'btnIsClick':btnClickIndex=='sendGift'}"
					@click="handleSendGift">赠 送</view>
			</view>
		</view>


		<view class="buy-modal flex-column-center-center" v-if="showBuyModal" @click="handleBuyGoodsClick('cancel')">
			<view class="buy-good-content flex-column-start-center" v-if="actBuyData" @click.stop>
				<view class="buy-total-consume flex-row-between-center">
					<view class="total-consume-box flex-row-start-center">
						总计：<image class="total-consume-icon"
							src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/68d883647c464cdeb8aa72413fee83f7.png"
							mode="aspectFill"></image>{{buyGoodsTotalConsume}}
					</view>

				</view>
				<view class="good-info">
					<view class="good-info-default flex-column-start-center"
						v-if="actBuyData.type=='prop'||actBuyData.type=='gift'">
						<view class="good-info-default-name flex-row-center-center">{{actBuyData.cardName}}</view>
						<view class="good-info-default-intro flex-row-center-center">{{actBuyData.intro}}</view>
						<view class="good-info-photo good-after-before" :class="{  'green-good': actBuyData.RarityLevel == 1,
		              'orange-good': actBuyData.RarityLevel == 2,
		              'blue-good': actBuyData.RarityLevel == 3,
		              'purple-good': actBuyData.RarityLevel == 4,'gray-good':!actBuyData.RarityLevel}">
							<image class="cover-img" :src="actBuyData.photoUrl" mode="aspectFill"></image>
							<view class="good-buy-num">x1</view>
						</view>
					</view>

					<view class="good-info-giftBox flex-row-start-start" v-if="actBuyData.type=='giftBox'">
						<view class="good-info-photo good-after-before" :class="{  'green-good': actBuyData.RarityLevel == 1,
						'orange-good': actBuyData.RarityLevel == 2,
						'blue-good': actBuyData.RarityLevel == 3,
						'purple-good': actBuyData.RarityLevel == 4,'gray-good':!actBuyData.RarityLevel}">
							<image class="cover-img" :src="actBuyData.photoUrl" mode="aspectFill"></image>
							<view class="good-buy-num">x1</view>
						</view>

						<view class="good-info-giftBox-intro">
							<view class="good-info-giftBox-name">{{actBuyData.cardName}}</view>
							<view class="good-info-giftBox-intro-content flex-row-start-center">{{actBuyData.intro}}
							</view>
						</view>

					</view>
				</view>
				<view class="good-split-line flex-row-center-center">
					<view class="good-line-point"></view>
					<view class="good-line"></view>
					<view class="good-line-point"></view>
				</view>

				<view class="good-info-gift-inner flex-column-start-center" v-if="actBuyData.type=='giftBox'">
					<view class="good-info-gift-inner-text flex-row-center-center">礼包内容</view>
					<view class="good-info-gift-inner-list flex-row-center-center">
						<view class="inner-list-item good-after-before" v-for="(item,index) in testGiftBoxList"
							:key="index" :class="{  'green-good': item.RarityLevel == 1,
		              'orange-good': item.RarityLevel == 2,
		              'blue-good': item.RarityLevel == 3,
		              'purple-good': item.RarityLevel == 4,'gray-good':!item.RarityLevel}">
							<image class="cover-img" :src="item.photoUrl" mode="aspectFill"></image>
							<view class="inner-list-item-num">x1</view>
						</view>
					</view>
				</view>
				<view class="good-control-inner flex-row-center-center"
					v-if="actBuyData.type=='prop'||actBuyData.type=='gift'">
					<view class="control-button flex-column-center-center" :class="{'btnIsClick':btnClickIndex=='sub'}"
						@click="handleBuyGoodsNumControl('sub')">
						<image class="control-button-icon"
							src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e40d77b419424b4f9454905876339876.png"
							mode="aspectFill"></image>
					</view>
					<view class="godd-buy-num flex-row-center-center">{{buyNum}}</view>
					<view class="control-button flex-column-center-center" :class="{'btnIsClick':btnClickIndex=='add'}"
						@click="handleBuyGoodsNumControl('add')">
						<image class="control-button-icon"
							src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/44d7f6c7db3f4fb094fc70b3eb53c26d.png"
							mode="aspectFill"></image>
					</view>
				</view>
				<view class="good-buy-btns flex-row-center-center">
					<view class="good-buy-cancel good-buy-btn flex-row-center-center"
						@click="handleBuyGoodsClick('cancel')" :class="{'btnIsClick':btnClickIndex=='cancel'}">取消
					</view>
					<view class="good-buy-confirm good-buy-btn flex-row-center-center"
						@click="handleBuyGoodsClick('confirm')" :class="{'btnIsClick':btnClickIndex=='confirm'}">确定
					</view>
				</view>
			</view>
		</view>
		<view class="recharge-box">
			<mRecharge ref="mRecharge"></mRecharge>
		</view>
	</view>
</template>

<script>
	import {
		getGiftListNew,

		buyGoods,
		getMyInfo,
	} from "@/api/game.js"
	import mRecharge from "@/components/m-recharge/index.vue"
	export default {
		props: {
			popHeigh: {
				type: [Number, String],
				default: 640
			},
			gameId: {
				type: String,
				default: ""
			}
		},
		components: {
			mRecharge
		},
		computed: {
			buyGoodsTotalConsume() {
				if (!this.actBuyData) {
					return 0
				} else {
					return this.actBuyData.cardPoint * this.buyNum
				}
			},
		},
		data() {
			return {
				actGiftIndex: 0,
				actGiftData: null,
				showBuyModal: false,
				actBuyData: {
					cardName: "神秘礼包",
					intro: "道具",
					cardPoint: 88,
					photoUrl: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ac24bc229b3d4fb18846dadf2d0b9076.png",
					type: "giftBox"
				},
				buyNum: 1,
				btnClickIndex: -1,
				totalPoint: 0,


				show: false,
				emptyList: [{
						isEmpty: true,
					},
					{
						isEmpty: true,
					},
					{
						isEmpty: true,
					},
					{
						isEmpty: true,
					},
				],
				actTypeTab: {
					name: "全部",
					key: "all"
				},
				typeTabs: [{
					name: "全部",
					key: "all"
				}],
				giftList: []
			}
		},
		created() {
			// this.giftList = this.giftList.concat(this.emptyList)
			this.handleGetGiftsList()

			this.handleGetMyInfo()
		},
		methods: {
			handleGetMyInfo() {
				let gameId = this.gameId
				getMyInfo({
					gameId
				}).then(res => {
					let result = res.data.result
					this.totalPoint = result.point

					// console.log("获取到的用户信息是", result);
				})
			},
			handleBuyGoodsClick(type) {
				this.btnClickIndex = type
				setTimeout(() => {
					this.btnClickIndex = -1
				}, 100)
				if (type == 'cancel') {
					console.log("取消购买");
					this.showBuyModal = false
					this.buyNum = 1
				} else if (type == 'confirm') {
					// console.log("确定购买");
					if (this.buyGoodsTotalConsume > this.totalPoint) {
						uni.showToast({
							title: "余额不足",
							icon: 'none'
						})
						// 弹起充值弹框
						this.$refs.mRecharge.open()

					} else {
						// 走购买逻辑
						buyGoods({
							gameId: this.gameId,
							cardId: this.actBuyData.id,
							num: this.buyNum
						}).then(res => {
							// console.log('购买成功返回', res);
							uni.showToast({
								title: "购买成功",
								icon: 'none'
							})
							// 没有接口 模拟
							this.actGiftData.total = this.actGiftData.total + this.buyNum
							// 
							this.showBuyModal = false
							this.buyNum = 1
						})

					}

				}
			},
			handleBuyGoodsNumControl(type) {
				this.btnClickIndex = type
				setTimeout(() => {
					this.btnClickIndex = -1
				}, 100)
				if (type == 'sub') {
					if (this.buyNum == 1) {
						return
					}
					this.buyNum--
				} else if (type == 'add') {
					if (this.buyNum == 999) {
						return
					}
					this.buyNum++
				}
			},
			handleBuyGoods(item, index) {
				console.log("点击购买", item);
				if (item.type == 'prop' || item.type == 'giftBox' || item.type == 'gift') {
					this.actBuyData = item
					this.showBuyModal = true
				}

				// 点击购买按钮，弹起购买弹窗
				// console.log("购买按钮点击");

			},
			handleSendGift() {
				// console.log("礼物赠送按钮点击");
				this.btnClickIndex = 'sendGift'
				setTimeout(() => {
					this.btnClickIndex = -1
				}, 100)

				if (!this.actGiftData.total) {
					// 弹出购买
					this.actBuyData = this.actGiftData
					this.showBuyModal = true
				} else {
					this.actGiftData.total = this.actGiftData.total - 1
				}
			},
			handleGetGiftsList() {
				let gameId = this.gameId
				getGiftListNew({
					gameId
				}).then(res => {
					let result = res.data.result
					this.giftList = result.map((item, index) => {
						// item.total = 10
						item.type = "gift"
						return item
					})
					if (result.length) {
						this.actGiftData = result[0]
					}
					// console.log("获取到的礼物列表是", result);
				})
			},
			handleGiftItemClick(item, index) {
				this.actGiftIndex = index
				this.actGiftData = item
				console.log("点击的礼物是", item);
			},
			handlePopClick(e) {
				if (e.target.id == "popAll") {
					this.show = false
					this.$emit("close")
				}
			},
			open() {
				this.show = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.m-gift-pop {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100vw;
		height: 100vh;
		z-index: 999999999999;
		pointer-events: fill;
		overflow: hidden;

		.intro-masker {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100%;
			height: 100%;
			// background-color: rgba(0, 0, 0, .5);
			z-index: 99999;
		}

		.pop-content {
			position: absolute;
			left: 0rpx;
			bottom: 0rpx;
			width: 100vw;
			box-sizing: border-box;
			background-color: transparent;
			transition: bottom 0.3s;
			pointer-events: fill;
			box-sizing: border-box;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			// background-color: rgba(255, 255, 255, .9);
			background-color: #fff;
			backdrop-filter: blur(15rpx);
			z-index: 999;

			.gift-type-tabs {
				width: 100%;
				height: 60rpx;
				margin-top: 20rpx;

				.type-tab-item {
					position: relative;
					width: 120rpx;
					height: 100%;
					font-size: 24rpx;
					line-height: 24rpx;
					color: #393939;
					font-weight: 700;
					margin-right: 10rpx;

					&:after {
						position: absolute;
						left: 50%;
						bottom: 0rpx;
						transform: translateX(-50%);
						content: "";
						width: 20rpx;
						height: 4rpx;
						opacity: 0;
						background-color: #9366eb;
					}
				}

				.act-tab {
					color: #9366eb;

					&::after {
						opacity: 1;
					}
				}
			}






			.bottom-gifts-scroll {
				height: 400rpx;
				width: 100%;
				overflow: hidden;
				margin-top: 20rpx;

				.gifts-content-y {
					width: 700rpx;
					height: 100%;

					.gift-list {
						width: 100%;
						flex-wrap: wrap;
						box-sizing: border-box;

						.gift-item {
							position: relative;
							width: 160rpx;
							height: 200rpx;
							margin-right: 20rpx;
							overflow: hidden;
							padding: 2rpx;

							&:nth-child(4n) {
								margin-right: 0rpx;
							}

							.gift-item-content {
								width: 100%;
								height: 100%;
								border-radius: 10rpx;
								box-sizing: border-box;
								border: 2rpx solid transparent;
							}

							.gift-img {
								margin-top: 10rpx;
								position: relative;
								width: 100rpx;
								height: 100rpx;

								.gift-num {
									position: absolute;
									right: 2rpx;
									bottom: 2rpx;
									padding: 4rpx 10rpx;
									font-size: 16rpx;
									line-height: 16rpx;
									color: rgba(0, 0, 0, .8);
									font-weight: 700;
									background-color: #f9d972;
									border-radius: 6rpx;
								}
							}

							.gift-name {
								width: 100%;
								font-size: 22rpx;
								line-height: 22rpx;
								text-align: center;
								color: #000;
								margin-top: 10rpx;
							}

							.gift-tip {
								width: 100%;
								font-size: 18rpx;
								line-height: 18rpx;
								text-align: center;
								color: #a5a2a2;
								margin-top: 10rpx;
							}

						}

						.active-gift-item {

							.gift-item-content {
								background-color: rgba(0, 0, 0, .05);
								// border-color: #9366eb;

								.gift-tip {
									// color: #fff;
								}

								.gift-img {
									animation: scaleGfit 0.5s ease-in-out;
								}
							}
						}

						.empty-gift-item {
							opacity: 0;
						}


					}
				}

			}

			.bottom-btn-box {
				width: 100%;
				// height: 100rpx;
				flex: 1;
				box-sizing: border-box;
				padding: 0rpx 40rpx;
				font-weight: 24rpx;
				line-height: 24rpx;
				color: #fff;
				font-weight: 700;

				.left-tip {
					color: #000;

					.left-tip-icon {
						width: 25rpx;
						height: 25rpx;
						margin-left: 10rpx;
					}
				}

				.right-send {
					width: 180rpx;
					height: 60rpx;
					border-radius: 10rpx;
					font-size: 30rpx;
					line-height: 60rpx;
					background-image: linear-gradient(to right, #f3f1c6, #efcf80);
					color: #b27439;
					font-weight: 700;
					box-shadow: 2rpx 2rpx 2rpx rgba(0, 0, 0, .1);
				}
			}
		}

		.recharge-box {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100%;
			height: 100%;
			z-index: 9999999;
			pointer-events: none;
		}

		.buy-modal {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100%;
			height: 100%;
			z-index: 1000;
			background-color: rgba(0, 0, 0, .5);

			.buy-good-content {
				position: relative;
				width: calc(100% - 120rpx);
				min-height: 500rpx;
				background-color: #fff;
				border-radius: 30rpx;
				overflow: hidden;

				.buy-total-consume {
					width: 100%;
					margin-top: 20rpx;
					padding: 0rpx 20rpx;

					.total-consume-box {
						font-size: 24rpx;
						line-height: 30rpx;
						color: #98989a;

						.total-consume-icon {
							width: 30rpx;
							height: 30rpx;
							margin-right: 6rpx;
						}
					}

				}

				.good-info {
					width: 100%;

					.good-info-default {
						width: 100%;

						.good-info-default-name {
							width: 100%;
							font-size: 30rpx;
							line-height: 30rpx;
							color: #343530;
							font-weight: 700;
							margin-top: 20rpx;
						}

						.good-info-default-intro {
							width: 100%;
							font-size: 28rpx;
							line-height: 28rpx;
							color: #343530;
							// font-weight: 700;
							margin-top: 30rpx;
						}


					}

					.good-info-giftBox {
						width: 100%;
						padding: 0rpx 60rpx;
						// margin-bottom: 30rpx;
						margin-top: 30rpx;

						.good-info-photo {
							margin-top: 0rpx;
							width: 150rpx;
							height: 150rpx;
						}

						.good-info-giftBox-intro {
							flex: 1;
							margin-left: 20rpx;

							.good-info-giftBox-name {
								width: 100%;
								font-size: 30rpx;
								line-height: 30rpx;
								color: #343530;
								font-weight: 700;
								margin-bottom: 20rpx;
							}

							.good-info-giftBox-intro-content {
								display: inline-block;
								font-size: 24rpx;
								line-height: 24rpx;
								background-color: rgba(245, 246, 250, 1);
								padding: 10rpx 20rpx;
								border-radius: 10rpx;
							}
						}
					}




					.good-info-photo {
						position: relative;
						width: 200rpx;
						height: 200rpx;
						// background-color: rgba(245, 246, 250, 1);
						background-color: rgba(255, 255, 255, 0.3);
						margin-top: 30rpx;
						// border-radius: 20rpx;
						overflow: hidden;

						.good-buy-num {
							position: absolute;
							right: 10rpx;
							bottom: 10rpx;
							font-size: 24rpx;
							line-height: 24rpx;
							color: #343530;
							font-weight: 700;
							z-index: 9;
						}

					}
				}

				.good-split-line {
					width: 100%;
					padding: 0rpx 40rpx;
					margin-top: 40rpx;

					.good-line-point {
						width: 10rpx;
						height: 10rpx;
						border-radius: 50%;
						background-color: #ccc;
					}

					.good-line {
						flex: 1;
						height: 5rpx;
						// background-color: #ccc;
						background: repeating-linear-gradient(to right,
								#ccc,
								#ccc 5rpx,
								transparent 5rpx,
								transparent 8rpx);
						margin: 0rpx 10rpx;
					}
				}

				.good-info-gift-inner {
					width: 100%;
					margin-top: 30rpx;

					.good-info-gift-inner-text {
						width: 100%;
						font-size: 24rpx;
						line-height: 24rpx;
						color: #343530;
					}

					.good-info-gift-inner-list {
						width: 100%;
						margin-top: 40rpx;

						.inner-list-item {
							position: relative;
							width: 100rpx;
							height: 100rpx;
							// background-color: rgba(245, 246, 250, 1);
							background-color: rgba(255, 255, 255, 0.3);
							margin-right: 20rpx;

							&:last-child {
								margin-right: 0rpx;
							}

							.inner-list-item-num {
								position: absolute;
								right: 5rpx;
								bottom: 5rpx;
								font-size: 20rpx;
								line-height: 20rpx;
								z-index: 9;
								color: #343530;
								font-weight: 700;
							}
						}
					}
				}

				.good-control-inner {
					width: 100%;
					margin-top: 30rpx;

					.control-button {
						width: 120rpx;
						height: 60rpx;
						border-radius: 30rpx;
						background-color: rgba(104, 97, 239, .1);

						.control-button-icon {
							width: 30rpx;
							height: 30rpx;
						}
					}

					.godd-buy-num {
						width: 200rpx;
						height: 60rpx;
						border-radius: 30rpx;
						font-size: 30rpx;
						line-height: 30rpx;
						color: #343530;
						background-color: rgba(245, 246, 250, 1);
						margin: 0rpx 20rpx;
					}
				}

				.good-buy-btns {
					width: 100%;
					margin-top: 50rpx;
					margin-bottom: 30rpx;

					.good-buy-btn {
						width: 200rpx;
						height: 80rpx;
						border-radius: 50rpx;
						border: 2rpx solid transparent;
						color: #343530;
						font-size: 30rpx;
						line-height: 30rpx;

					}

					.good-buy-cancel {
						margin-right: 30rpx;
						border-color: #98989a;

					}

					.good-buy-confirm {
						background-color: #9366eb;
						color: #fff;
					}
				}
			}
		}

		.pkVideo {
			position: absolute;
			width: 100vw;
			height: 100vh;
			object-fit: cover;
			z-index: 1;
		}

	}

	@keyframes scaleGfit {
		0% {
			transform: scale(0.95);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}


	.btnIsClick {
		animation: buttonClickScale 0.1s linear;
	}
</style>